<template>
  <a-card>
    <div class="ant-card-head-wrapper">
      <div class="ant-card-head-title">
        <span class="title">考勤</span>
        <span class="subtitle">数据时间：{{dataDate}}</span>
      </div>
      <div class="ant-card-extra">
        <a-button type="primary" @click="handleType('attendance')">查看详情<a-icon type="caret-right" /></a-button>
      </div>
    </div>
    <div style="height: 202px;">
      <div class="attdance-content">
        <div class="state">
          <div class="center" :class="checkStatus">{{checkStatusStr}}</div>
        </div>
      </div>
      <div class="attdanceFooter">入园时间: {{checkTime}}</div>
    </div>
  </a-card>
</template>
<script>
import { getAction } from '@/api/manage';

export default {
  name: 'attendance',
  data() {
    return {
      url: {
        attendanceInfo: "management/skStudentCheck/getStudentCheck",
      },
      studentId: '',
      dataDate: '',
      nextDate: '',
      checkStatus: '',
      checkStatusStr: '',
      checkTime: '--',
      pageSize: 5,
    }
  },
  props:[],
  components: {},
  filters: {},
  
  computed: {},
  
  created() {
    this.dataDate = this.$skCommon.getDate(0)
    this.nextDate = this.$skCommon.getDate(0)
  },
  
  activated() {
  },

  mounted() {
    // this.load();
  },

  methods: {
    load(dataForm) {
      console.log('dataForm', dataForm);
      this.dataDate =  dataForm.dataDate
      this.nextDate =  dataForm.dataDate
      this.studentId = dataForm.studentId
      this.loadAttendance();
    },
    loadAttendance() {
      const params = {
        studentId: this.studentId,
        startDate: this.dataDate,
        endDate: this.nextDate,
      }
      getAction(this.url.attendanceInfo, params).then(res => {
        if(res.success){
          console.log('Attendance', res.result);
          const data = res.result
          if(data.length > 0) {
            this.checkStatus = data[0].late ? 'late' : 'normal'
            this.checkStatusStr = data[0].late ? '迟到' : '正常';
            console.log('data', data[0].checkDate)
            this.checkTime = data[0].checkDate + ' ' + data[0].checkInTime
          }else{
            this.checkStatus = 'no'
            this.checkStatusStr = '--'
            this.checkTime = '--'
          }
        } else {
          this.$message.warning(res.message);
        }
      })
    },
    handleType(type){
      this.$emit('detail',type);
    },
  }
}
</script>
<style scoped lang="less">

.attdance-content {
      text-align: center;
      height: 175px;

      & > .state {
        margin: 26px auto;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        
        .center {
          height: 100%;
          text-align: center;
          padding-top: 40%;
          background-color: rgb(51, 182, 164);
        }

        .normal {
          background-color: rgb(45, 185, 80);
        }
        .late{
          background-color: #FF9933;
        }
        .no {
          background-color: #f00;
        }
      }
  }

  .attdanceFooter {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
  }

</style>